import 'package:flutter/material.dart';

/// 首页示例3 - 深色主题风格
class HomePage8 extends StatelessWidget {
  const HomePage8({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return _buildContent(context);
  }
  
  // 构建内容区域
  Widget _buildContent(BuildContext context) {
    return Container(
      color: const Color(0xFF1E1E2D),
      child: SingleChildScrollView(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildHeader(context),
            const SizedBox(height: 24),
            _buildSummaryCards(),
            const SizedBox(height: 24),
            _buildCharts(),
            const SizedBox(height: 24),
            _buildTransactions(),
          ],
        ),
      ),
    );
  }
  
  // 构建页面标题
  Widget _buildHeader(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '首页示例8 - 深色主题风格',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              '深色主题风格',
              style: TextStyle(
                fontSize: 14,
                color: Colors.grey[400],
              ),
            ),
          ],
        ),
        OutlinedButton.icon(
          icon: const Icon(Icons.date_range, size: 16),
          label: const Text('2024年3月'),
          style: OutlinedButton.styleFrom(
            foregroundColor: Colors.white,
            side: const BorderSide(color: Colors.white24),
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          ),
          onPressed: () {},
        ),
      ],
    );
  }
  
  // 构建摘要卡片
  Widget _buildSummaryCards() {
    return LayoutBuilder(
      builder: (context, constraints) {
        return GridView.count(
          crossAxisCount: constraints.maxWidth < 700 ? 1 : 3,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          children: [
            _buildSummaryCard(
              title: '月收入',
              value: '¥89,421',
              increase: '+4.3%',
              bgColor: const Color(0xFF2D6CDF),
              icon: Icons.account_balance_wallet,
            ),
            _buildSummaryCard(
              title: '月支出',
              value: '¥22,154',
              increase: '-0.8%',
              bgColor: const Color(0xFF8C3FE8),
              icon: Icons.shopping_cart,
            ),
            _buildSummaryCard(
              title: '净收益',
              value: '¥67,267',
              increase: '+5.7%',
              bgColor: const Color(0xFF00A389),
              icon: Icons.trending_up,
            ),
          ],
        );
      },
    );
  }
  
  // 构建摘要卡片
  Widget _buildSummaryCard({
    required String title,
    required String value,
    required String increase,
    required Color bgColor,
    required IconData icon,
  }) {
    final isNegative = increase.startsWith('-');
    
    return Container(
      decoration: BoxDecoration(
        color: bgColor,
        borderRadius: BorderRadius.circular(12),
      ),
      padding: const EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                  color: Colors.white70,
                ),
              ),
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.2),
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  icon,
                  color: Colors.white,
                  size: 20,
                ),
              ),
            ],
          ),
          const Spacer(),
          Text(
            value,
            style: const TextStyle(
              fontSize: 26,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          const SizedBox(height: 8),
          Row(
            children: [
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                decoration: BoxDecoration(
                  color: isNegative ? Colors.red.withOpacity(0.2) : Colors.green.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Row(
                  children: [
                    Icon(
                      isNegative ? Icons.arrow_downward : Icons.arrow_upward,
                      color: isNegative ? Colors.red : Colors.green,
                      size: 12,
                    ),
                    const SizedBox(width: 2),
                    Text(
                      increase,
                      style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.bold,
                        color: isNegative ? Colors.red : Colors.green,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(width: 8),
              Text(
                '相比上月',
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.white.withOpacity(0.6),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
  
  // 构建图表区域
  Widget _buildCharts() {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isSmallScreen = constraints.maxWidth < 700;
        
        if (isSmallScreen) {
          return Column(
            children: [
              _buildRevenueChart(),
              const SizedBox(height: 16),
              _buildSalesChart(),
            ],
          );
        } else {
          return Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                flex: 2,
                child: _buildRevenueChart(),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: _buildSalesChart(),
              ),
            ],
          );
        }
      },
    );
  }
  
  // 构建收入图表
  Widget _buildRevenueChart() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xFF2D2D3F),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                '收入概览',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              Row(
                children: [
                  _buildLegendItem(color: const Color(0xFF2D6CDF), label: '收入'),
                  const SizedBox(width: 16),
                  _buildLegendItem(color: const Color(0xFF8C3FE8), label: '支出'),
                ],
              ),
            ],
          ),
          const SizedBox(height: 16),
          SizedBox(
            height: 250,
            child: Center(
              child: Text(
                '这里将显示收入概览图表',
                style: TextStyle(
                  color: Colors.grey[400],
                  fontSize: 14,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
  
  // 构建销售图表
  Widget _buildSalesChart() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xFF2D2D3F),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '销售分布',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          const SizedBox(height: 16),
          SizedBox(
            height: 250,
            child: Center(
              child: Text(
                '这里将显示销售分布图表',
                style: TextStyle(
                  color: Colors.grey[400],
                  fontSize: 14,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
  
  // 构建图例项
  Widget _buildLegendItem({required Color color, required String label}) {
    return Row(
      children: [
        Container(
          width: 12,
          height: 12,
          decoration: BoxDecoration(
            color: color,
            shape: BoxShape.circle,
          ),
        ),
        const SizedBox(width: 4),
        Text(
          label,
          style: const TextStyle(
            fontSize: 12,
            color: Colors.white70,
          ),
        ),
      ],
    );
  }
  
  // 构建交易记录
  Widget _buildTransactions() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xFF2D2D3F),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                '最近交易',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              TextButton(
                onPressed: () {},
                child: const Text(
                  '查看全部',
                  style: TextStyle(color: Color(0xFF2D6CDF)),
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Column(
            children: [
              _buildTransactionItem(
                title: '软件开发服务',
                subtitle: '企业客户',
                amount: '+¥15,200',
                date: '2024-03-12',
                icon: Icons.code,
                iconBgColor: const Color(0xFF2D6CDF),
                isIncome: true,
              ),
              _buildTransactionItem(
                title: '广告投放费用',
                subtitle: '市场推广',
                amount: '-¥4,300',
                date: '2024-03-10',
                icon: Icons.campaign,
                iconBgColor: const Color(0xFFE53935),
                isIncome: false,
              ),
              _buildTransactionItem(
                title: 'UI设计服务',
                subtitle: '个人客户',
                amount: '+¥8,600',
                date: '2024-03-08',
                icon: Icons.design_services,
                iconBgColor: const Color(0xFF00A389),
                isIncome: true,
              ),
              _buildTransactionItem(
                title: '服务器费用',
                subtitle: '运维开支',
                amount: '-¥2,199',
                date: '2024-03-05',
                icon: Icons.storage,
                iconBgColor: const Color(0xFFE53935),
                isIncome: false,
                showDivider: false,
              ),
            ],
          ),
        ],
      ),
    );
  }
  
  // 构建交易项
  Widget _buildTransactionItem({
    required String title,
    required String subtitle,
    required String amount,
    required String date,
    required IconData icon,
    required Color iconBgColor,
    required bool isIncome,
    bool showDivider = true,
  }) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 12),
          child: Row(
            children: [
              Container(
                width: 44,
                height: 44,
                decoration: BoxDecoration(
                  color: iconBgColor,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Icon(
                  icon,
                  color: Colors.white,
                  size: 20,
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: const TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                        color: Colors.white,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      subtitle,
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey[400],
                      ),
                    ),
                  ],
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    amount,
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: isIncome ? Colors.green : Colors.red,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    date,
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.grey[400],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        if (showDivider)
          const Divider(
            color: Colors.white10,
            height: 1,
          ),
      ],
    );
  }
} 